import React from 'react'
import { connect } from 'react-redux'
import { delTodo, toggleItem } from '../actions/index'
class TodoList extends React.Component {
  constructor(props) {
    super(props)
  }
  del (id) {
    console.log(id)
    this.props.delTodo(id)
  }
  itemChange (id) {
    this.props.toggleItem(id) //通过触发actions 完成操作
  }
  render () {
    let { todos } = this.props;

    return (<div className="tolist">
      {todos.map((item, index) => {
        return (<div className='list_one' key={item.id} >
          <input type="checkbox" onChange={this.itemChange.bind(this, item.id)} defaultChecked={item.ischeck} />
          <span style={item.ischeck ? { textDecoration: 'line-through' } : {}}>{item.text}</span>
          <button onClick={this.del.bind(this, item.id)}>删除</button>
        </div>)
      })}
    </div >)
  }
}

let mapStateToProps = (state) => ({
  todos: state.todos
})

let mapDispatchToProps = (dispatch) => ({
  delTodo: (id) => dispatch(delTodo(id)),//写好的删除的actions 注入到本组件
  toggleItem: (id) => dispatch(toggleItem(id))//注入切换的actions
})
export default connect(mapStateToProps, mapDispatchToProps)(TodoList)